 <template>
 	
  <view class="container">
        <view class="headIamge">
            <view v-for="(item,index) in selectedImage" :key="index">
                <image class="image" :src="item" mode="scaleToFill"></image>
            </view>
            <view class="title">
                <text class="title-text">{{ userType === 'admin' ? name1 : name }}</text>
            </view>
        </view>
        <view class="menu">
            <view v-for="(item,index) in userType === 'admin' ? adminMenu : userMenu" :key="index" class="menu-item" 
                @click="navigateToPage(item)">
                <text>{{ item }}</text>
                <image src="../../static/image/箭头.png" class="arrow-icon"></image>
            </view>
        </view>
    </view>
	<view class="logout-button" @click="logout">
	            <text class="logout-text">退出登录</text>
	        </view>
</template>

<script setup>
    import { ref } from 'vue';

    const headImage = "http://q.qlogo.cn/headimg_dl?dst_uin=2528152223&spec=640&img_type=jpg";
    const headImage2 = "https://ruli-app-admin.oss-cn-shanghai.aliyuncs.com/202401/05/b504a0d71f3ea87d948dffde1.jpg";
    const Image = [headImage];
    const Image2 = [headImage2];
    const name = "个人中心";
    const name1 = "福荣华";
    const adminMenu = ["挂号记录", "报告查询", "更多服务", "联系客服"]; // 管理员菜单项
    const userMenu = ["挂号记录", "报告查询", "缴费记录", "收藏医生", "更多服务", "联系客服"]; // 普通用户菜单项

    const userType = ref(uni.getStorageSync('userType') || ''); // 从本地存储中获取用户类型

    // 根据用户类型选择头像
    const selectedImage = ref(userType.value === 'admin' ? Image2 : Image);

    // 添加一个判断点击跳转的页面名称
    const pageMappings = {
        "挂号记录": "/pages/record/record",
        "收藏医生": "/pages/doctor/doctor"
    };
    const navigateToPage = (pageName) => {
        const pagePath = pageMappings[pageName];
        if (pagePath) {
            uni.navigateTo({
                url: pagePath
            }).catch(error => {
                console.error("跳转页面失败:", error);
            });
        } else {
            console.error("页面路径未定义");
        }
    }
	
	 // 退出功能
	 const logout = () => {
	     // 清除本地存储中的用户类型等必要清理操作
	     uni.removeStorageSync('userType');
	     
	     // 返回登录页面
	     uni.navigateTo({
	         url: '/pages/login/login'
	     }).catch(error => {
	         console.error("跳转登录页面失败:", error);
	     });
	 }

</script>

<style scoped>
	.container {
		background-color: #f8f8f8;
		padding: 20px;
		font-size: 14px;
	}

	.headIamge {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		margin-bottom: 20px;
	}

	.image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
	}

	.title {
		margin-top: 10px;
	}

	.title-text {
		font-size: 24px;
	}

	.menu {
		background-color: #fff;
		padding: 20px;
		border-radius: 10px;
		box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
	}

	.menu-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 0;
		border-bottom: 1px solid #eee;
	}

	.arrow-icon {
		width: 20px;
		height: 20px;
	}
   .logout-button {
        margin-top: 20px;
        background-color: #FF4D4F;
        border-radius: 5px;
        padding: 10px 20px;
        text-align: center;
        cursor: pointer;
    }

    .logout-text {
        color: #fff;
        font-size: 16px;
        font-weight: bold;
    }
</style>